<template>
  <view>
    <view class="search-content">
      <view class="search-content-con">
        <u-search
          barHeight="88rpx"
          placeholder="请输入收货人姓名/电话查询"
          bg-color="#F7F8FA"
          v-model="keyword"
          :maxlength="20"
          @search="headerSearchHandle"
          @custom="headerSearchHandle"
          :action-style="searchActionStyle"
        ></u-search>
      </view>
    </view>
    <view class="address-card" v-for="item in dataList" :key="item.id">
      <view class="address-card__details" @click="customerHandle(item)">
        <view class="address-card__details-image">
          <view>
            {{ item.consigneeName.slice(0, 1) }}
          </view>
        </view>
        <view class="address-card__details-content">
          <view class="address-card__details-info">
            <span class="address-card__details-name">{{
              item.consigneeName
            }}</span>
            <span class="address-card__details-tel">{{
              item.consigneePhone
            }}</span>
          </view>
          <view class="address-card__details-adress am-text-eill">{{
            item.consigneeProvince +
            item.consigneeCity +
            item.consigneeCounty +
            item.consigneeAddress
          }}</view>
        </view>
      </view>
      <view class="address-card__operation">
        <span
          class="address-card__operation--btn address-card__operation--delete"
          @click="deleteItem(item.id)"
          >删除</span
        >
        <span
          class="address-card__operation--btn address-card__operation--edit"
          @click="editItem(item)"
          >编辑</span
        >
      </view>
    </view>

    <template v-if="pageQuery.pType !== 'choose'">
      <view class="footer-bar-place"></view>
      <view class="footer-bar am-flex-rc-center">
        <navigator url="/pages/customer/create-customer"
          ><button class="u-reset-button co-primary-button add-customer-btn">
            新增收货地址
          </button></navigator
        >
      </view>
    </template>
  </view>
</template>

<script>
import { apiCustomerList, deleteustomer } from '@/api/customer'
import {
  CHOOSE_RECEIVING_ADDRESS,
  UPDATE_CUSTOMER_LIST
} from '@/types/globalEventName'
// 不允许请求的type
const noRequestType = [1, 2, 3]
export default {
  data() {
    return {
      dataList: [],
      keyword: '',
      realSearchKeyword: '',
      dataList: [],
      pageNum: 1,
      loadingType: 999,
      letterArray: [],
      pageQuery: {},
      searchActionStyle: {
        color: '#fff',
        fontSize: '28rpx',
        background:
          'linear-gradient( 323deg, #FF4564 8%, #F14141 30%, #FC843B 100%)',
        borderRadius: '200rpx 200rpx 200rpx 200rpx',
        width: '112rpx',
        height: '56rpx',
        lineHeight: '56rpx'
      }
    }
  },
  /**
   * @param {Object} option - 页面参数
   * @param {String} option.pType [undefined| choose]- 页面类型； choose:进入选择地址模式
   * */
  onLoad(option) {
    uni.$on(UPDATE_CUSTOMER_LIST, this.getInit)
    this.pageQuery = option
    this.getDataList()
  },
  onUnload() {
    uni.$off(UPDATE_CUSTOMER_LIST, this.getInit)
  },
  onReachBottom() {
    this.getDataList()
  },
  onPullDownRefresh() {
    this.getInit()
  },
  methods: {
    getInit() {
      this.pageNum = 1
      this.loadingType = 999
      this.dataList = []
      this.letterArray = []
      this.getDataList()
    },
    getDataList() {
      if (noRequestType.includes(this.loadingType)) {
        return
      }
      this.loadingType = 2
      console.log('调用获取数据')
      apiCustomerList({
        // pageNum: this.pageNum,
        // pageSize: 40,
        keyword: this.realSearchKeyword,
        consigneeName: '',
        consigneePhone: ''
      })
        .then(({ data }) => {
          console.log(data)
          if (data.state === 'OK') {
            this.dataList = data.data
            // let orDataList = [...this.dataList]
            //   let letterArray = [...this.letterArray]
            //   dataList.forEach((p1) => {
            //     let curIndex = letterArray.indexOf(p1.firstLetter)
            //     p1.my_self_slide = false // 是否展开
            //     p1.my_self_revice_more = p1.proxyClientConsigneeVOList.length > 1 // 是否展开
            //     if (curIndex > -1) {
            //       orDataList[curIndex].my_self_children.push(p1)
            //     } else {
            //       letterArray.push(p1.firstLetter)
            //       orDataList.push({
            //         my_self_id: `${p1.id}`,
            //         my_self_children: [p1],
            //         my_self_letter: p1.firstLetter
            //       })
            //     }
            //   })
            //   this.letterArray = letterArray
            //   this.dataList = orDataList
            //   console.log(this.dataList)
            //   if (this.pageNum === 1 && this.dataList.length === 0) {
            //     this.loadingType = 1
            //   } else if (data.data.lastPage) {
            //     this.loadingType = 3
            //   } else {
            //     this.loadingType = 999
            //     this.pageNum++
            //   }
            // }
            uni.stopPullDownRefresh()
          }
        })
        .catch((err) => {
          console.log(err)
          this.loadingType = 999
          this.$am_toast.warning('查询失败，请重新尝试！')
          uni.stopPullDownRefresh()
        })
    },
    headerSearchHandle(e) {
      console.log(e)
      if (this.realSearchKeyword !== e) {
        this.realSearchKeyword = e
        this.getInit()
      }
    },
    // 客户点击
    customerHandle(item) {
      console.log('sssssssssssssss')
      console.log(item)
      if (this.pageQuery.pType === 'choose') {
        uni.$emit(CHOOSE_RECEIVING_ADDRESS, item)
        uni.navigateBack({
          delta: 1
        })
        // if (hasMore) {
        //   this.$set(
        //     this.dataList[index].my_self_children[itemIndex],
        //     'my_self_slide',
        //     !slide
        //   )
        // } else {
        //   console.log(
        //     this.dataList[index].my_self_children[itemIndex]
        //       .proxyClientConsigneeVOList[0]
        //   )
        //   let checkAddress =
        //     this.dataList[index].my_self_children[itemIndex]
        //       .proxyClientConsigneeVOList[0]
        //   if (!checkAddress) {
        //     this.$am_toast('请完善收货地址信息')
        //   } else {
        //     uni.$emit(CHOOSE_RECEIVING_ADDRESS, checkAddress)
        //     uni.navigateBack({
        //       delta: 1
        //     })
        //   }
        // }
      }
      //  else {
      //   this.$u.route('/pages/customer/customer-details', { id })
      // }
    },
    addressClick(item) {
      console.log(item)
      uni.$emit(CHOOSE_RECEIVING_ADDRESS, item)
      uni.navigateBack({
        delta: 1
      })
    },
    deleteItem(id) {
      uni.showModal({
        content: '确认删除此条数据？',
        confirmColor: '#4BB019',
        success: (logRes) => {
          if (logRes.confirm) {
            deleteustomer({
              id
            }).then(({ data }) => {
              console.log(data)
              data.state === 'OK'
                ? this.getInit()
                : this.$am_toast.warning('删除失败！')
            })
          }
        }
      })
    },
    editItem(item) {
      console.log(item)
      this.$u.route('/pages/customer/create-customer', {
        item: JSON.stringify(item)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$section-plr: 32rpx;
$details-margin-bottom: 20rpx;
$details-font-size: 26rpx;
.customer-wrap {
}
.letter-section {
  // border-bottom: 1px solid #ededed;
}
.letter-section-title {
  height: 45rpx;
  padding: 0 $section-plr;
  font-size: 22rpx;
}
.cusomter-content {
}
.customter-item {
  & + .customter-item {
    .customter-item-main {
      border-top: 1px solid #ededed;
    }
  }
}
.customter-item-main {
  height: 100rpx;
  padding: 0 $section-plr;
  background-color: #fff;
  font-size: 30rpx;
}
.customter-user-name {
}
.customter-user-phone {
}
.footer-bar {
  position: fixed;
  left: 0;
  bottom: 15rpx;
  width: 750rpx;
  height: 100rpx;
  // background-color: #fff;
}
.footer-bar-place {
  height: 100rpx;
  // background-color: #fff;
}
.add-customer-btn {
  width: 690rpx;
  height: 80rpx;
  font-size: 34rpx;
  line-height: 80rpx;
  background: linear-gradient(323deg, #ff4564 0%, #f14141 16%, #fc843b 100%);
  border-radius: 200rpx;
}
.address-content {
  padding: 16rpx 19rpx;
}
.address-item {
  min-height: 240rpx;
  background: #ffffff;
  border-radius: 20rpx;
  & + .address-item {
    margin-top: 10rpx;
  }
}
.address-cell-item {
  display: flex;
  padding: 19rpx 22rpx;
}
.address-cell__label {
  width: 170rpx;
  flex-shrink: 0;
  font-size: 26rpx;
  color: #666666;
}
.address-cell__con {
  flex: 1;
  width: 0;
  font-size: 26rpx;
  color: #333333;
  line-height: 37rpx;
}
.customter-user-arrow {
  width: 30rpx;
  height: 30rpx;
  margin-left: 25rpx;
  flex-shrink: 0;
}

.address-management {
  background: #f5f5f5;
}
.address-card {
  padding: $details-margin-bottom;
  margin: 24rpx;
  background: #fff;
  border-radius: 16rpx;
}
.address-card__details-image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 96rpx;
  height: 96rpx;
  border: 3rpx solid #f1f3f9;
  margin-right: $details-margin-bottom;
  flex-shrink: 0;
  background: #ffe6d7;
  border-radius: 50%;
  color: #fe6507;
}
.address-card__details {
  display: flex;
  align-items: center;
  margin-bottom: 38rpx;
}
.address-card__details-name {
  font-size: 24rpx;
  font-weight: 500;
  color: #333333;
}
.address-card__details-tel {
  margin-left: $details-margin-bottom;
  font-size: 24rpx;
  color: #666666;
}
.address-card__details-adress {
  width: 520rpx;
  margin-top: 18rpx;
  font-weight: 500;
  font-size: 32rpx;
  color: #1d2129;
}
.address-card__operation {
  border-top: 2rpx solid #f3f3f3;
  display: flex;
  justify-content: flex-end;
}
.address-card__operation--btn {
  width: 96rpx;
  height: 48rpx;
  background: #ffffff;
  border-radius: 8rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16rpx;
  margin-left: 24rpx;
  font-size: 24rpx;
}
.address-card__operation--delete {
  border: 2rpx solid #dcdee0;
  color: #1c1c1e;
}
.address-card__operation--edit {
  border: 2rpx solid #f14141;
  color: #f14141;
}
.address-add {
  position: fixed;
  bottom: 70rpx;
  left: 28rpx;
  width: 690rpx;
  height: 80rpx;
  background: linear-gradient(132deg, #fe6507 0%, #f69027 100%);
  border-radius: 40rpx;
  color: #fff;
}
.search-content {
  height: 84rpx;
  display: flex;
  align-items: center;
  padding: 24rpx;
  background-color: #fff;
}
.search-content-con {
  flex: 1;
}
</style>
